<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>课程详情</title>
    <link rel="stylesheet" href="CSSFile/BootStrapCSS/bootstrap.css">
    <link rel="stylesheet" href="CSSFile/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1266869_983rnteliqi.css">
    <link rel="stylesheet" href="CSSFile/CourseInfo.css">
    <link rel="stylesheet" href="CSSFile/navigation.css">
</head>
<body>

<ul class="nav black container-fluid">
    <li class="col-lg-1"><a target="_top" href="Home.html">Elearning</a></li>
    <li class="col-lg-1"><a target="_top" href="CourseList.html">浏览课程</a></li>
    <li class="col-lg-1"><a href="LiveList.html">浏览直播</a></li>
    <li class="col-lg-3">
        <form class="form-inline" action="Search.html" method="post" target="_top" name="nav-form"
              onsubmit="setSearchKey()">
            <input class="form-control" type="search" placeholder="搜索感兴趣的课程" required name="search-box">
            <button class="btn btn-success" type="submit"><i class="fa fa-search" aria-hidden="true">搜索</i></button>
        </form>
    <li class="col-lg-1"><a href="Message.html">消息<span class="badge"></span></a></li>
    <li class="col-lg-1"><a href=""><img id="userimg" alt="用户头像"></a></li>
</ul>

<div class="my-container container">
    <div class="row">
        <div class="col-lg-5">
            <img class="course-img">
        </div>
        <div class="col-lg-4" style="padding-left: 20px">
            <h3 class="course-name"></h3>
            <h5><i class="iconfont icon-jiaoshi teacher-name"></i>主讲教师：</h5>
            <h5><i class="fa fa-users learn-total" aria-hidden="true"></i>参与人数：</h5>
            <h5><i class="fa fa-clock-o course-create-date" aria-hidden="true"></i>创建时间：</h5>
            <button class="btn btn-primary btn-lg try-button">试看课程</button>
            <button type="button" class="btn btn-success btn-lg purchase-button" data-toggle="modal"
                    data-target="#myModal">立即购买
                <i class="fa fa-jpy" aria-hidden="true" style="color: #f00a0a"></i>
            </button>
        </div>
        <div class="col-lg-3">
            <h5 style="text-align: center; margin-top: 10px">教师简介</h5>
            <p class="teacher-intro">
            </p>
        </div>
    </div>
</div>

<div class="container">
    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-md">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">购买确认</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body" style="text-align: center; font-size: 20px">
                    是否确认购买？
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal" onclick="joinCourse()">确认
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <div class="course-info">
                <h5 style="text-align: center">课程简介</h5>
                <p class="course-intro"></p>
            </div>

            <div class="chapter">
                <ul style="margin-bottom: 10px">

                </ul>
            </div>
        </div>
        <div class="col-lg-4 comment">
            <div class="my-comment">
                <img src="https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/faf1333033303536323338f108">
                <h6 style="display: inline-block">用户名</h6>
                <div>
                    <textarea placeholder="发表评论..."></textarea>
                    <button class="btn btn-info" onclick="postComment()">发表评论</button>
                </div>
            </div>
            <div class="other-comment">
                <div class="row" id="CommentArea">
                    <div class="col-lg-4" style="margin-top: 10px; margin-left: 10px">
                        <img src="https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/faf1333033303536323338f108">
                        <h6 style="margin-top: 10px">用户名</h6>
                        <h6>2019-12-31</h6>
                    </div>
                    <div class="col-lg-7">
                        <p class="auto-wrap">
                            11111111111111111asdasfaasdashldkjghsdgnsgdfgagadfgdfgsdfg1111111111111111</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="JSFile/jquery-3.4.1.js"></script>
<script src="JSFile/BootStrapJS/bootstrap.bundle.js"></script>
<script src="JSFile/CourseInfo.js"></script>
<script src="JSFile/navigation.js"></script>
</body>
</html>